<div class="content" [@loadingState]="loading ? 'true' : 'false'">

    <br/>

    <div *ngIf="event._source">

        <div class="row">
            <div class="col-md">
                <button type="button" class="btn btn-secondary mr-2"
                        (click)="goBack()">Back
                </button>
                <button type="button" class="btn btn-secondary mr-2"
                        *ngIf="showArchiveButton()"
                        (click)="archiveEvent()">Archive
                </button>

                <!-- For now, escalation is only for alerts. -->
                <div *ngIf="eventType() == 'alert'" style="display: inline;">
                    <button *ngIf="!isEscalated()" type="button"
                            class="btn btn-secondary mr-2"
                            (click)="escalateEvent()">Escalate
                    </button>
                    <button *ngIf="isEscalated()" type="button"
                            class="btn btn-secondary mr-2"
                            (click)="deEscalateEvent()">De-escalate
                    </button>
                </div>

            </div>
        </div>

        <br/>

        <div class="card">
            <div style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;"
                 class="card-header {{event | eventSeverityToBootstrapClass:'evebox-bg-':'success'}}">
                <b>{{event._source.event_type | uppercase}}:
                    <div style="display: inline;" [innerHTML]="event | eveboxEventDescriptionPrinter"></div>
                    <span *ngIf="event._source.event_type == 'stats'"
                          class="float-right">{{ event._source.timestamp | date : 'medium'}}</span>
                </b>
                <span class="pull-right" *ngIf="alertGroup">
                    &nbsp;<a href="#" (click)="sessionSearch()">
                    <span
                            class="badge badge-secondary">{{alertGroup.count}}</span>
                </a>
                </span>
                <span class="pull-right"
                      *ngIf="servicesForEvent.length > 0">
                    [
                    <span
                            *ngFor="let service of servicesForEvent; let last = last">
                        <a href="{{service.getUrl(event)}}"
                           target="{{service.getTarget()}}">{{service.name}}</a>
                        <span *ngIf="!last"> |</span>
                    </span>
                    ]
                </span>
            </div>
            <div *ngIf="event._source.event_type != 'stats'" class="card-body">
                <div class="row">
                    <div class="col">

                        <table class="table table-sm table-striped table-hover info-table">
                            <tr>
                                <td>Timestamp</td>
                                <td>
                                    <search-link field="timestamp"
                                                 value="{{event._source.timestamp}}">
                                        {{event._source.timestamp}}
                                    </search-link>
                                </td>
                            </tr>

                            <!-- Sensor name. -->
                            <tr *ngIf="normalized.sensor_name">
                                <td>Sensor</td>
                                <td>
                                    <search-link [field]="normalized.sensor_name_key" [search]="normalized.sensor_name"
                                                 value="{{normalized.sensor_name}}">
                                    </search-link>
                                </td>
                            </tr>

                            <tr *ngIf="event._source.proto">
                                <td>Protocol</td>
                                <td>{{event._source.proto}}</td>
                            </tr>
                            <tr *ngIf="event._source.src_ip">
                                <td>Source</td>
                                <td>
                                    <!-- @formatter:off -->
                                    <search-link field="src_ip"
                                                 [search]="event._source.src_ip"
                                                 value="{{event._source.src_ip | eveboxFormatIpAddress}}">
                                    </search-link>
                                    <span
                                            *ngIf="event._source.src_port"
                                            style="color: dimgray">:{{event._source.src_port}}</span>
                                    <span class="dropdown">
                                        <a href="#" class="dropdown-toggle"
                                           data-toggle="dropdown"
                                           aria-haspopup="true" aria-expanded="true">
                                            <span class="caret"></span>
                                        </a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item"
                                               [routerLink]="['/reports/ip', {ip: event._source.src_ip}]">IP
                                                Report</a>
                                        </div>
                                    </span>
                                    <!-- @formatter:on -->
                                </td>
                            </tr>
                            <tr *ngIf="event._source.dest_ip">
                                <td>Destination</td>
                                <td>
                                    <search-link field="dest_ip"
                                                 [search]="event._source.dest_ip"
                                                 value="{{event._source.dest_ip | eveboxFormatIpAddress}}">
                                    </search-link><!-- @formatter: off -->
                                    <span
                                            *ngIf="event._source.dest_port"
                                            style="color: dimgray">:{{event._source.dest_port}}</span>
                                    <!-- @formatter:on -->
                                    <span class="dropdown">
                                        <a href="#" class="dropdown-toggle"
                                           data-toggle="dropdown"
                                           aria-haspopup="true" aria-expanded="true">
                                            <span class="caret"></span>
                                        </a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item"
                                               [routerLink]="['/reports/ip', {ip: event._source.dest_ip}]">IP
                                                Report</a>
                                        </div>
                                    </span>
                                </td>
                            </tr>
                            <tr *ngIf="event._source.in_iface">
                                <td>In Interface</td>
                                <td>{{event._source.in_iface}}</td>
                            </tr>
                            <tr *ngIf="event._source.flow_id">
                                <td>Flow ID</td>
                                <td>
                                    <search-link field="flow_id"
                                                 value="{{event._source.flow_id}}">
                                        {{event._source.flow_id}}
                                    </search-link>
                                </td>
                            </tr>
                        </table>

                    </div>

                    <div class="col">
                        <div [ngSwitch]="event._source.event_type">
                            <div *ngSwitchCase="'alert'">
                                <table
                                        class="table table-sm table-striped table-hover info-table">
                                    <tr>
                                        <td>Signature</td>
                                        <td>{{event._source.alert.signature}}</td>
                                    </tr>
                                    <tr>
                                        <td>Category</td>
                                        <td>{{event._source.alert.category}}</td>
                                    </tr>
                                    <tr>
                                        <td>Signature ID</td>
                                        <td>
                                            <!-- @formatter:off -->
                                            {{event._source.alert.gid}}:
                                            <search-link
                                                    field="alert.signature_id"
                                                    router="/alerts"
                                                    value="{{event._source.alert.signature_id}}">
                                            </search-link>
                                            :{{event._source.alert.rev}}
                                            <!-- @formatter:on -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Severity</td>
                                        <td>{{event._source.alert.severity}}</td>
                                    </tr>
                                </table>
                            </div>
                            <div *ngSwitchCase="'dns'">
                                <table
                                        class="table table-sm table-striped table-hover info-table">
                                    <tr>
                                        <td>Transaction ID</td>
                                        <td>{{event._source.dns.id}}</td>
                                    </tr>
                                    <tr>
                                        <td>Type</td>
                                        <td>{{event._source.dns.type | lowercase | titlecase}}</td>
                                    </tr>
                                    <tr>
                                        <td>Request</td>
                                        <td>
                                            <span *ngIf="event._source.dns.rrtype">{{event._source.dns.rrtype}} </span>
                                            {{event._source.dns.rrname}}
                                        </td>
                                    </tr>
                                    <!-- For Pre EVE DNS v2. -->
                                    <tr *ngIf="!event._source.dns.answers && event._source.dns.rdata">
                                        <td>Answer</td>
                                        <td>{{event._source.dns.rdata}}</td>
                                    </tr>
                                </table>
                                <div *ngIf="event._source.dns.answers">
                                    <table
                                            class="table table-sm table-striped table-hover app-no-border">
                                        <tr>
                                            <th colspan="3">Answers</th>
                                        </tr>
                                        <tr *ngFor="let answer of event._source.dns.answers">
                                            <td>{{answer.rrtype}}</td>
                                            <td>{{answer.rrname}}</td>
                                            <td>{{answer.rdata}}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div *ngIf="event._source.dns.authorities">
                                    <table
                                            class="table table-sm table-striped table-hover app-no-border">
                                        <tr>
                                            <th colspan="3">Authorities</th>
                                        </tr>
                                        <tr *ngFor="let answer of event._source.dns.authorities">
                                            <td>{{answer.rrtype}}</td>
                                            <td>{{answer.rrname}}</td>
                                            <td>{{answer.rdata}}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div *ngSwitchDefault>
                                <table
                                        class="table table-sm table-striped table-hover info-table">
                                    <tr *ngFor="let item of event._source[event._source.event_type] | mapToItems">
                                        <td><b>{{item.key | eveboxGenericPrettyPrinter}}</b></td>
                                        <td>
                                            <search-link [value]="item.val"></search-link>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Rule. -->
        <div *ngIf="event._source.alert && event._source.alert.rule">
            <br/>
            <div class="card">
                <div class="card-header">
                    <b>Rule</b>
                </div>
                <div class="card-body"
                     [innerHTML]="event._source.alert.rule | ruleHighlight">
                </div>
            </div>
        </div>

        <!-- History. -->
        <div *ngIf="event._source.evebox && event._source.evebox.history && (event._source.event_type != 'stats')">
            <br/>
            <div class="card">
                <div class="card-header">
                    <b>History</b>
                </div>
                <ul class="list-group">
                    <li *ngFor="let action of event._source.evebox.history"
                        class="list-group-item">
                        <div [ngSwitch]="action.action">
                            <div *ngSwitchCase="'escalated'">
                                {{action.timestamp | eveboxFormatTimestamp}} - Escalated by <b>{{action.username}}</b>
                            </div>
                            <div *ngSwitchCase="'de-escalated'">
                                {{action.timestamp | eveboxFormatTimestamp}} - De-escalated by
                                <b>{{action.username}}</b>
                            </div>
                            <div *ngSwitchCase="'archived'">
                                {{action.timestamp | eveboxFormatTimestamp}} - Archived by <b>{{action.username}}</b>
                            </div>
                            <div *ngSwitchCase="'comment'">
                                {{action.timestamp | eveboxFormatTimestamp}} - Comment by <b>{{action.username}}</b>
                                <br/>
                                <pre style="margin-bottom: 0px;">{{action.comment}}</pre>
                            </div>
                            <div *ngSwitchDefault>
                                {{action.timestamp | eveboxFormatTimestamp}} -
                                <{{action.username}}> : {{action.action}}
                            </div>
                        </div>
                    </li>
                </ul>
                <div *ngIf="features['comments'] && !commentInputVisible"
                     class="card-footer">
                    <button class="btn btn-secondary"
                            (click)="commentInputVisible = true">Add
                        Comment
                    </button>
                </div>
            </div>
        </div>

        <div *ngIf="event._source.event_type != 'stats' && features['comments'] && (!hasHistory() || commentInputVisible)">
            <br/>
            <app-comment-input id="comment"
                               *ngIf="!hasHistory() || commentInputVisible"
                               (on-close)="commentInputVisible = false"
                               (on-submit)="onCommentSubmit($event)"></app-comment-input>
        </div>

        <!-- DNS -->
        <div *ngIf="event._source.event_type != 'dns'">
            <div *ngIf="event._source.dns">
                <br/>
                <div class="card">
                    <div class="card-header">
                        <b>DNS</b>
                    </div>
                    <div class="card-body" style="padding: 0;">
                        <div *ngIf="event._source.dns.query" class="col">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th style="border-top: 0;">Request</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let query of event._source.dns.query">
                                        <td>{{query.rrtype}}</td>
                                        <td>{{query.rrname}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div *ngIf="event._source.dns.answers" class="col">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th style="border-top: 0;">Type</th>
                                        <th style="border-top: 0;">RRname</th>
                                        <th style="border-top: 0;">Rdata</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let answer of event._source.dns.answers">
                                        <td>{{answer.rrtype}}</td>
                                        <td>{{answer.rrname}}</td>
                                        <td>{{answer.rdata}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div *ngIf="event._source.event_type == 'stats'">
            <br/>
            <div class="card">
                <div class="card-header">
                    <b>Stats</b>
                </div>
                <div class="card-body">

                    <table
                            class="table table-sm table-striped table-hover info-table">
                        <tr *ngFor="let item of event._source.stats | mapToItems">
                            <td><b>{{item.key}}</b></td>
                            <td>{{item.val}}</td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>

        <!-- HTTP. -->
        <div *ngIf="http">
            <br/>
            <div class="card">
                <div class="card-header">
                    <b>HTTP</b>
                </div>
                <div class="card-body">
                    <table class="table table-striped table-sm">
                        <tr *ngFor="let item of http | mapToItems">
                            <td style="border: 0px; white-space: nowrap">{{item.key |
                                eveboxGenericPrettyPrinter}}:
                            </td>
                            <td style="border: 0px;">
                                <search-link [value]="item.val"></search-link>
                            </td>
                        </tr>
                    </table>

                    <div *ngIf="event._source.http.http_request_body">
                        <br/>
                        <div class="card" style="margin-bottom: 0px;">
                            <div class="card-header">
                                HTTP Request Body
                            </div>

                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="card bg-theme">
                                            <div class="card-body">
                                                <pre style="white-space: pre-wrap;">{{event._source.http.http_request_body | eveboxBase64Decode | printable}}</pre>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="card bg-theme">
                                            <div class="card-body">
                                                <pre style="overflow-x: scroll;">{{event._source.http.http_request_body | eveboxBase64Decode | hex}}</pre>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div *ngIf="event._source.http.http_response_body">
                        <br/>
                        <div class="card" style="margin-bottom: 0px;">
                            <div class="card-header">
                                HTTP Response Body
                            </div>

                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="card bg-theme">
                                            <div class="card-body">
                                                <pre style="white-space: pre-wrap;">{{event._source.http.http_response_body | eveboxBase64Decode | printable}}</pre>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="card bg-theme">
                                            <div class="card-body">
                                                <pre style="overflow-x: scroll;">{{event._source.http.http_response_body | eveboxBase64Decode | hex}}</pre>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- GeoIP. -->
        <div *ngIf="hasGeoip()">
            <br/>
            <div class="card">
                <div class="card-header">
                    <b>GeoIP</b>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div *ngFor="let item of event._source.geoip | mapToItems"
                             class="col-md-4">
                            <em>{{item.key | eveboxGenericPrettyPrinter}}:</em>
                            <search-link [value]="item.val"></search-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TLS (in-event). -->
        <div *ngIf="event._source.event_type != 'tls' && event._source.tls">
            <br/>
            <div class="card">
                <div class="card-header">
                    <b>TLS</b>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div *ngFor="let item of event._source.tls | mapToItems"
                             class="col-md-6">
                            <em>{{item.key | eveboxGenericPrettyPrinter}}:</em>
                            <search-link [value]="item.val"></search-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Payload -->
        <div *ngIf="event._source.payload">
            <br/>
            <div class="card">
                <div class="card-header">
                    <b>Payload</b>
                    <span class="pull-right">
                        <button
                                class="btn btn-secondary"
                                (click)="eventToPcap('payload');">PCAP
                        </button>
                    </span>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="card bg-theme">
                                <div class="card-body">
                                    <pre style="white-space: pre-wrap;">{{event._source.payload | eveboxBase64Decode | printable}}</pre>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="card bg-theme">
                                <div class="card-body">
                                    <pre>{{event._source.payload | eveboxBase64Decode | hex}}</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Packet -->
        <div *ngIf="event._source.packet">
            <br/>
            <div class="card">
                <div class="card-header">
                    <b>Packet</b>
                    <span class="pull-right">
                        <button
                                class="btn btn-secondary"
                                (click)="eventToPcap('packet');">PCAP
                        </button>
                    </span>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card bg-theme">
                                <div class="card-body">
                                    <pre style="white-space: pre-wrap;">{{event._source.packet | eveboxBase64Decode | printable}}</pre>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card bg-theme">
                                <div class="card-body">
                                    <pre>{{event._source.packet| eveboxBase64Decode | hex}}</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- JSON -->
        <br/>
        <div class="card">
            <div class="card-header">
                <b>JSON</b>
            </div>
            <div class="card-body m-2" style="padding: 0px;">
                <pre class="pb-0 mb-0" style="white-space: pre-wrap; word-wrap: anywhere;"><output
                        [innerHTML]="event | eveboxJsonPretty"></output></pre>
            </div>
        </div>

    </div>
</div>
